<template>
  <el-badge
    class="bounceIn"
    :value="badgeValue"
    :type="badgeType"
    :offset="isExpired ? [-16, 0] : [-4, 0]"
  >
    <div
      class="card-wrapper"
      :style="{ backgroundColor: atis.color }"
      @click="showDetail"
    >
      <div class="airport-code">
        <b>{{ atis.airportCode }}</b
        >&nbsp;进港通播
      </div>
      <div class="arrival-code" v-if="show">
        {{ atis.arrivalCode }}
      </div>
      <!-- <div class="arrival-version">{{atis.arrivalVersion.split(' ')[1]}}&nbsp;UTC&nbsp;更新</div> -->
      <div class="arrival-version" v-if="show">
        更新于&nbsp;<b>{{ minutesAgo }}</b
        >&nbsp;分钟前
      </div>
    </div>
  </el-badge>
</template>

<script>
import { h } from "vue";
import {
  ElMessage,
  ElMessageBox,
  ElDescriptions,
  ElDescriptionsItem,
} from "element-plus";
export default {
  name: "atisCodeCard",
  props: {
    atis: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      show: true,
      timer: null,
      minutesAgo: 0,
    };
  },
  computed: {
    // minutesAgo() {
    //   let version = this.atis.arrivalVersion;
    //   let versionTime = new Date(version).getTime() + 8 * 3600000;
    //   let nowTime = new Date().getTime();
    //   let ago = Math.round((nowTime - versionTime) / 60000);
    //   return ago < 999 ? ago : 999;
    // },
    isExpired() {
      let hour = new Date().getHours();
      let limit = ["ZUUU", "ZUTF"].includes(this.atis.airportCode)
        ? hour >= 0 && hour < 4
          ? 60
          : 30
        : 60;
      return this.minutesAgo > limit + 6;
    },
    isNew() {
      return this.minutesAgo <= 6;
    },
    badgeValue() {
      return this.isNew ? "新" : this.isExpired ? "过期" : "";
    },
    badgeType() {
      return this.isNew ? "success" : this.isExpired ? "danger" : "info";
    },
  },
  methods: {
    calcMinutesAgo() {
      let version = this.atis.arrivalVersion;
      let versionTime = new Date(version).getTime() + 8 * 60 * 60 * 1000;
      let nowTime = new Date().getTime();
      let ago = Math.round((nowTime - versionTime) / 60 / 1000);
      this.minutesAgo = ago < 999 ? ago : 999;
      return ago < 999 ? ago : 999;
    },
    showDetail() {
      let messages = [];
      let data = JSON.parse(this.atis.fullContent);
      // const h = this.$createElement;
      // {"ID": 101, "ICAO": "ZUTF", "ARRQNH": 998, "ARRRWY": "01 AND 02", "DEPQNH": 998, "DEPRWY": "01 AND 02", "ARRVERSION": "R", "DEPVERSION": "Q", "ISAUTOSYNC": true, "ARRUPDATETIME": "2022-07-15 15:30:16", "DEPUPDATETIME": "2022-07-15 15:30:16"}
      messages.push(
        h(ElDescriptionsItem, { label: "机场代码" }, () => data.ICAO)
      );
      messages.push(
        h(ElDescriptionsItem, { label: "进港通播代码" }, () => data.ARRVERSION)
      );
      messages.push(
        h(ElDescriptionsItem, { label: "进港更新" }, () => data.ARRUPDATETIME)
      );
      messages.push(
        h(ElDescriptionsItem, { label: "离港通播代码" }, () => data.DEPVERSION)
      );
      messages.push(
        h(ElDescriptionsItem, { label: "离港更新" }, () => data.DEPUPDATETIME)
      );
      messages.push(
        h(ElDescriptionsItem, { label: "通播代码来源" }, () =>
          data.ISAUTOSYNC ? "自动更新" : "人为修改"
        )
      );
      messages.push(
        h(ElDescriptionsItem, { label: "进港修正海压" }, () =>
          data.ARRQNH ? data.ARRQNH : "无此信息"
        )
      );
      messages.push(
        h(ElDescriptionsItem, { label: "离港修正海压" }, () =>
          data.DEPQNH ? data.DEPQNH : "无此信息"
        )
      );
      messages.push(
        h(ElDescriptionsItem, { label: "进港使用跑道" }, () =>
          data.DEPRWY ? data.DEPRWY : "无此信息"
        )
      );
      messages.push(
        h(ElDescriptionsItem, { label: "离港使用跑道" }, () =>
          data.ARRRWY ? data.ARRRWY : "无此信息"
        )
      );
      this.$msgbox({
        title: data.ICAO + " 通播详情",
        message: h(
          ElDescriptions,
          { column: 1, border: true, size: "" },
          () => messages
        ),
        draggable: true,
      });
      // this.$notify({
      //   title: data.ICAO + ' 通播详情',
      //   message: h('div', null, messages),
      //   type: 'success',
      // });
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.show = false;
      this.calcMinutesAgo();
      this.$nextTick(() => {
        this.show = true;
      });
    }, 3000);
  },
  unmounted() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
@import "@/styles/card.css";

.airport-code {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.arrival-code {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  font-weight: bold;
  line-height: 96px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.arrival-version {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
</style>
